<!--
/**
 *
 * @authors garyzyz (zhouyouzhao@yeah.net)
 * @date    2016-12-13 14:55:23
 * @version $Id$
 */ 
 -->
<template>
  <div class="beancurd-cube-component">
    <div class="main" v-for="(item, index) in data">
      <div class="list" v-for="(list, ind) in item">
        <a v-if="list.url" class="list-url" :href="list.url">
          <img class="list-icon" :src="list.icon">
          <p class="list-name">{{list.name}}</p>
        </a>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  /*
    entry 配置信息
  */
  const entryConf = [
    [
      {
        name: '班车',
        url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?cid[]=99',
        icon: 'imgs/index/icon_home_bus_100x100px.png'
      },
      {
        name: '商城',
        url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php',
        icon: '../imgs/index/icon_home_mall_100x100px.png'
      },
      {
        name: '兑换',
        url: 'http://piao.pandauu.com/index1.php#/convert',
        icon: '../imgs/index/icon_home_exchange_100x100px.png'
      }
    ],
    [
      {
        name: '我的 票/订单',
        url: 'http://piao.pandauu.com/single/piao_1_4/ticket/selOrder.php',
        icon: '../imgs/index/icon_home_myticket_100x100px.png'
      },
      {
        name: '帮助',
        url: 'http://piao.pandauu.com/single/piao_1_4/help/help.html',
        icon: '../imgs/index/icon_home_help_100x100px.png'
      },
      {
        name: '',
        url: '',
        icon: ''
      }
    ]
  ];
  export default {
    props: {
      data: {
        type: Array,
        default () {
          return entryConf;
        }
      }
    }
  };
</script>

<style lang="less" rel="stylesheet/less">
  .beancurd-cube-component{
    background-color: #fff;
    .main{
      display: flex;
      border-bottom: 1px solid #e6e6e6;
      &:last-child{
        border-bottom: none;
      }
      .list{
        flex: 1;
        height: 97px;
      }
      .list:last-child a{
        border-right: none;
      }
      .list-url{
        display: block;
        text-align: center;
        border-right: 1px solid #e6e6e6;
        height: 100%;
        font-size: 0;
        color: #4a4a4a;
      }
      .list-icon{
        width: 55px;
        margin-top: 17px;
      }
      .list-name{
        font-size: 15px;
        line-height: 15px;
        padding-top: 2px;
      }
    }
  }
</style>
